<template>
      <div class="aside" >
          <ul>
              <li class="item" v-if="token==null||token=='false'" @click="skip({path:'/about'})" >
                  <div class="iconfont el-icon-user-solid"></div>
                  <div class="text"  >登录/注册
                  </div></li>
              <li class="item2" v-else @click="stop()" >
                  <div class="iconfont el-icon-user-solid"></div>
                  <div class="text"  >已登录
                  </div></li>
              <li class="item"  @click="skip2()">
                  <div class="iconfont el-icon-picture-outline-round"></div>
                  <div class="text" >个人中心</div>
              </li>
              <li class="item">
                  <div class="iconfont el-icon-headset"></div>
                  <div class="text" >客户服务
                 <div class="phone">
                     <div class="phone-text">冷冷老师：13062611097</div>
                     <div class="phone-text">涵涵老师：13062621096</div>
                     <div class="icon el-icon-caret-right"></div>
                 </div>
                  </div>
                </li>
              <li class="item">
                  <div class="iconfont el-icon-s-goods"></div>
                  <div class="text" >关注有礼
                       <div class="code">
                      <img src="http://res0.chenxin99.com/images/contact/qy_13062621096.jpg" alt="">
                  </div>
                  </div>
              </li>
              <li class="item" @click="roof()">
                  <div class="iconfont el-icon-upload2"></div>
                  <div class="text" >回到顶部</div>
              </li>
          </ul>
      </div>
</template>

<script>
export default {
    data(){
        return{
            textData:["登录/注册","个人中心","客户服务","关注有礼","返回顶部"],
            token:"",
        }
    },
    methods:{
        //回到顶部按钮
       roof(){
          scrollTo(0,0)
       },
       skip(url){
           this.$router.push(url)
       },
       stop(){
           return false;
       },
       skip2(){
            if(localStorage.getItem("type")==1){
              this.$router.push('/order1');
            }else{
              this.$router.push('/order');
            }
       }
    },
    mounted(){
        this.token = localStorage.getItem("token");
        console.log(this.token);
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
    .aside{
        position: fixed;
        right: 20px;
        font-size: 18px;
        border-radius: 7px;
        top: 20%;
        border: 2px solid #e5e5e5;
        background: #ccc;
        z-index: 99;
    }
    .item{
        width: 110px;
        height: 90px;
        text-align: center;
        /* font-size: 24px; */
        position: relative;
        padding-top: 10px; ;
        box-sizing: border-box;
        border-bottom: 1px solid rgb(245, 84, 106) ;
        cursor: pointer;
    }
    .item2{
        width: 110px;
        height: 90px;
        color: white;
        text-align: center;
        /* font-size: 24px; */
        position: relative;
        padding-top: 10px; ;
        box-sizing: border-box;
        background: rgb(245, 84, 106);
        border-bottom: 1px solid rgb(245, 84, 106) ;
        cursor: not-allowed;
        /* pointer-events:none; */

    }
    .item2 .iconfont{
        color: white;
    }
    .item:hover{
        background:rgb(245, 84, 106) ;
    }
    /* .item:hover .entor{
        display: block;
    } */
    .item:hover .iconfont{
        color: white;
    }
    .item:hover .text{
        color: white;
    }
    .text{
        /* color: #fff; */
        margin-top: 10px; ;
    }
    .iconfont{
        width: 100%;
        text-align: center;
        font-size: 30px;
        color: rgb(245, 84, 106);

    }
    /* .entor{
        display: none;
        width: 300px;
        height: 300px;
        background: pink;
        position: absolute;
        top: 0;
        left: -300px;
    }
    .use{
        display: flex;
        border: 1px solid #fff;
        box-sizing: border-box;
        font-size: 25px;
        color: #fff;
    }
    .user{
        width: 50%;
        height: 50px;
        line-height: 50px;
        background: #ccc;
    } */
    /* .staff{
        width: 50%;
        line-height: 50px;
    }
    .staff:hover{
        background: #ccc;
    }
    .staff:hover+.user{
        background: pink;
     }
    .state{
        width: 100%;
        padding: 20% 0;
        display: flex;
    }
    .btn{
        width: 100px;
        height: 100px;
        font-size: 20px;
        color: pink;
        line-height: 100px;
        background: white;
        margin: 0 auto;
        border-radius: 50%;
    } */
    /* 关注有礼 */
    .code{
        display: none;
        width: 100px;
        height: 100px;
        position: absolute;
        left: -130px;
        top: -5px;
    }
    .item:hover .code{
        display: block;
    }
    .code::after{
        content: "";
        display: block;
        border:  20px  solid;
        border-width: 15px 20px 15px 20px;
        border-color: transparent transparent transparent rgb(245, 84, 106);
        position: absolute;
        right: -40px;
        top: 30px;
        transform: translate(45deg);
    }
    .code img{
        width: 100%;
        height: 100%;
    }
    /* 客户服务 */
    .phone{
        display: none;
         width: 300px;
        height: 100px;
        position: absolute;
        left: -350px;
        top: -5px;
        background: pink;
        font-size: 20px; ;
        padding-top: 20px;
        box-sizing: border-box;
    }
    .item:hover .phone{
        display: block;
    }
    .icon{
        position: absolute;
        color: pink;
        font-size: 50px;
        right: -31px;
        top: 50%;
        margin-top: -20px;
    }
    /* .item2{
        pointer-events:none; 
         cursor:not-allowed;
    } */
</style>>